<template>
    <div class="mmv-article-type">
        <!-- 三个标签有同时存在的可能 所以是这种写法 -->
        <span class="mmv-article-type__label mmv-article-type__top">置顶</span>
        <span class="mmv-article-type__label mmv-article-type__official">官方</span>
        <span class="mmv-article-type__label mmv-article-type__quality">精品</span>
    </div>
</template>

<style lang="less">
.mmv-article-type {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    &__label {
        height: 18px;
        border-radius: 2px;
        text-align: center;
        line-height: 18px;
        font-weight: 600;
        padding: 0 4px;
        margin-right: 6px;
        flex-shrink: 0;
    }
    &__label&__top {
        box-sizing: content-box;
        border: 1px solid #4cc3ff;
        color: #4cc3ff;
    }
    &__label&__official {
        background-color: #4cc3ff;
        color: #fff;
    }
    &__label&__quality {
        background-color: #ffb300;
        color: #fff;
    }
}
</style>